<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="Developed By M Abdur Rokib Promy"/>
    <meta name="author" content="cosmic"/>
    <meta name="keywords" content="Bootstrap 3, Template, Theme, Responsive, Corporate, Business"/>
    <link rel="shortcut icon" href="/img/favicon.png"/>

    <title>
      Acme | Home
    </title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/theme.css" rel="stylesheet"/>
    <link href="/css/bootstrap-reset.css" rel="stylesheet"/>
    <!--external css-->
    <link href="/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/flexslider.css"/>
    <link href="/assets/bxslider/jquery.bxslider.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/animate.css"/>
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>


    <!-- Custom styles for this template -->
    <link href="/css/style.css" rel="stylesheet"/>
    <link href="/css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
<script src="/js/html5shiv.js">
</script>
<script src="/js/respond.min.js">
</script>
<![endif]-->
  </head>

  <body>
    <!--header start-->
  	<header th:include="/common/header" class="head-section">
  	</header>
    <!--header end-->

    <!--breadcrumbs start-->
    <div class="breadcrumbs">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-sm-4">
            <h1>
              Blog Details
            </h1>
          </div>
          <div class="col-lg-8 col-sm-8">
            <ol class="breadcrumb pull-right">
              <li>
                <a href="#">
                  Home
                </a>
              </li>
              <li>
                <a href="#">
                  Blog
                </a>
              </li>
              <li class="active">
                Blog Details
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!--breadcrumbs end-->

    <!--container start-->
    <div class="container">
      <div class="row">
        <!--blog start-->
        <div class="col-lg-9">
          <div class="blog-item">
            <div class="row">
              <div class="col-lg-2 col-sm-2">
                <div class="date-wrap">
                  <span class="date" th:text="${articleModel.day}">
                  </span>
                  <span class="month" th:text="${articleModel.mounth}">
                  </span>
                </div>

              </div>
              <div class="col-lg-10 col-sm-10">


                <div class="blog-img gs">
                  <img th:src="${articleModel.coverFileSrc}" src="/img/blog/img6.jpg" alt=""/>
                </div>

              </div>
            </div>
            <div class="row">
              <div class="col-lg-2 col-sm-2 text-right">
                <div class="author">
                  By
                  <a href="javaScript:void(0);"  th:text="${articleModel.author.name}">
                    Admin
                  </a>
                </div>
                <ul class="list-unstyled">
                  <li>
                    <a href="javascript:;">
                      <em>
                        travel
                      </em>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <em>
                        tour
                      </em>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <em>
                        recreation
                      </em>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <em>
                        tourism
                      </em>
                    </a>
                  </li>
                </ul>
                <div class="st-view">
                  <ul class="list-unstyled">
                    <li>
                      <a href="javascript:void(0);" th:text="${articleModel.readNum+' 阅读'}">
                        0 阅读
                      </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                        23 Share
                      </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                        23 评论？？？？
                      </a>
                    </li>

                  </ul>
                </div>
              </div>
              <div class="col-lg-10 col-sm-10">
                <h1>
                  <a href="javaScript:void(0);" th:text="${articleModel.title}">
                  </a>
                </h1>
                <!-- 文章内容######################start -->
                <p th:utext="${articleModel.context}">
                </p>
               
               <!-- 评论区开始####################start -->
				<div th:include="/articleDetail/comments" >
				</div>
  			   <!-- 评论区开始########################end -->
               
                <div class="post-comment">
                  <h3 class="skills">
                    Post Comments
                  </h3>
                  <form class="form-horizontal" role="form">
                    <div class="form-group">
                      <div class="col-lg-4">
                        <input type="text" placeholder="Name" class="col-lg-12 form-control"/>
                      </div>

                      <div class="col-lg-4">
                        <input type="text" placeholder="Email" class="col-lg-12 form-control"/>
                      </div>

                      <div class="col-lg-4">
                        <input type="text" placeholder="2+2=?" class="col-lg-12 form-control"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-lg-12">
                        <textarea placeholder="Message" rows="8" class=" form-control">
                        </textarea>
                      </div>
                    </div>
                    <p>
                      <button type="submit" class="btn btn-info pull-right">
                        Post Comment
                      </button>
                    </p>
                  </form>
                </div>

              </div>
            </div>
          </div>

        </div>

		<!-- 公共右侧开始######### start#############################-->
			<div th:include="/common/commonRight" >
			</div>
			
			
		<!-- 公共右侧开始######### end#############################-->

      </div>

    </div>
    <!--container end-->

    <!--footer start-->
    <footer class="footer" th:include="/common/footer"></footer>
    <!-- footer end -->
    <!--small footer start -->
    <footer class="footer-small" th:include="/common/smallfooter"></footer>
    <!--small footer end-->
	 <script src="/js/jquery-1.8.3.min.js">
    </script>
    <!-- js placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.js">
    </script>
    <script src="/js/bootstrap.min.js">
    </script>
    <script type="text/javascript" src="/js/hover-dropdown.js">
    </script>
    <script  src="/js/jquery.flexslider.js">
    </script>
    <script type="text/javascript" src="/assets/bxslider/jquery.bxslider.js">
    </script>

    <script src="/js/jquery.easing.min.js">
    </script>
    <script src="/js/link-hover.js">
    </script>
	   <script type="text/javascript">
      $(function() {
     
     	
     	

      });
    </script>
	
    <!--common script for all pages-->
    <script src="/js/common-scripts.js">
    </script>

    <script src="/js/wow.min.js">
    </script>
    <script>
      wow = new WOW(
        {
          boxClass:     'wow',      // default
          animateClass: 'animated', // default
          offset:       0          // default
        }
      )
        wow.init();
    </script>

  </body>
</html>
